<template>
</template>
<script>
  import Vue from 'vue'
  import {Button, Popup, Picker, CascadePicker} from 'cube-ui'
  Vue.use(Button)
  Vue.use(Popup)
  Vue.use(Picker)
  Vue.use(CascadePicker)
  export default {
    props: {
      data: {
        type: Array,
        default: []
      },
      show: {
        type: Boolean,
        default: false
      },
      name: {
        type: String,
        default: ''
      }
    },
    data () {
      return {
        selectItem: {}
      }
    },
    watch: {
      show (val) {
        if (val) {
          this.cityPicker.show()
        }
      },
      data (val) {
        if (val) {
          this.cityPicker = this.$createCascadePicker({
            title: this.name ? this.name : '请选择',
            alias: {
              value: 'value',
              text: 'label'
            },
            data: this.data,
            onSelect: this.selectHandle,
            onCancel: this.cancelHandle
          })
        }
      }
    },
    methods: {
      selectHandle (selectedVal, selectedIndex, selectedText) {
        this.selectItem = {
          value: selectedVal,
          label: selectedText
        }
        this.$emit('select', this.selectItem)
      },
      cancelHandle () {
        this.$emit('cancel')
      }
    }
  }
</script>